<!--
 * @Descripttion: 
 * @version: 
 * @Author: kk
 * @Date: 2020-10-23 12:21:40
 * @LastEditors: kk
 * @LastEditTime: 2020-10-28 16:12:30
-->
<!--  -->
<template>
  <div>
  <el-button type="primary" size="mini" class="btn_add" @click="addFormVisible = true">添加用户</el-button>

      <el-dialog title="添加角色" :visible.sync="addFormVisible">
        <el-form :model="role">
          <el-form-item label="角色名" :label-width="formLabelWidth">
            <el-input v-model="role.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" :label-width="formLabelWidth">
            <el-input v-model="role.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色排序" :label-width="formLabelWidth">
            <el-input v-model="role.sort" autocomplete="off"></el-input>
          </el-form-item>
        
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addRole()">提 交</el-button>
    </div>
  </el-dialog>
    
    <el-table
      class="RoleTable"
      :data="roles"
      border
      style="width: 95%"
    >
      <el-table-column
        prop="id"
        label="ID"
      >
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
      >
      </el-table-column>
      <el-table-column
        prop="roleDesc"
        label="角色描述"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <!-- Form -->
          <el-button
            size="mini"
            class="btn_assign"
            type="primary"
            icon="el-icon-edit"
            @click="getRoleMenu(scope.row.id)"
          >分配权限</el-button>

          <el-dialog
            title="分配权限"
            :visible.sync="dialogFormVisible"
          >
            <!-- 树形权限结构 -->
            <el-tree
              :data="data"
              ref="rootTree"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="selectedMenu"
            >
            </el-tree>
            <div
              slot="footer"
              class="dialog-footer"
            >
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="updateRoleMenu(scope.row.id)"
              >确 定</el-button>
            </div>
          </el-dialog>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deleteRole(scope.row.id)"
          >删除角色</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import role from "@/api/role";
import menu from "@/api/menu";
import router from "@/router";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},

  data() {
    return {
      roles: [
        {
          id: "1",
          userName: "耳机",
          phone: "10086",
          email: "1000",
        },
      ],
      dialogFormVisible: false,
      data: [], //树形
      selectedMenu: [], //被选中的数组
      addFormVisible: false,
      role: {},
      formLabelWidth: '120px'
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addRole(){
      role.addRole(this.role).then(response=>{
        if(response.code==200){
          this.$message({
            type: "success",
            message: "添加成功"
          })
        }
        this.addFormVisible=false;
        this.getRoleList()
      })
    },
    updateRoleMenu(roleId) {
      this.dialogFormVisible = false;
      //更新
      var res=this.$refs.rootTree.getCheckedKeys()
      console.log(roleId)
      menu.assignMenuToRole(roleId,res).then(response=>{
        if(response.code==200){
          this.$message({
            type: "success",
            message: "更新成功!",
          });
        }
      })
    },
    getRoleMenu(roleId) {
      this.dialogFormVisible = true;
      menu.getRoleMenu(roleId).then((response) => {
        console.log(response.data);
        this.data = response.data.children;
        this.selectedMenu = response.data.selectedMenu;
      });
    },
    //分页查询商品列表
    onSubmit() {
      this.getRoleList();
    },
    getRoleList() {
      //默认为1
      role.getRoleList().then((response) => {
        //请求成功
        console.log(response.data);
        const res = response.data;
        this.roles = res.roleList;
        this.total = res.total;
      });
    },
    removeRole(id) {
      //console.log(id);
      role.removeRole(id).then((response) => {
        if (response.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //刷新
          this.getRoleList();
        }
      });
    },
    deleteRole(id) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeRole(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getRoleList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.RoleTable {
  margin-left: 20px;
  margin-top: 20px;
}
.btn_assign {
  margin-right: 10px;
}
.Center {
  // margin: 0 auto;
  // margin-top: 20px;
  padding: 30px 0;
  text-align: center;
  //align-content: center;
}
.btn_add{
  float: right;
  margin-right: 50px;
  margin-bottom: 20px;;
}
</style>